<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
    {{msg}}     <button @click="msg='Hello 你好'">切换</button>
    <p v-show="condition">
      ilove you
    </p>
    <button @click="condition =false">隐藏</button>
    <button @click="condition =true">显示</button>

    <p v-html="msg"></p>
    <div v-for="item in arr" :key="item.id">
      {{item.id}}-{{item.name}}
    </div>
    <div v-html="url"></div>
    <a href="https://www.baidu.com">百度</a>

    <div>
      <p v-if="gender === 1">性别：男</p>
      <p v-else>性别：女</p>
    </div>
    <div>========================================================</div>
    
    <div>
      <!-- v-on:  =====>  @ -->
      <button v-on:click="count--">-</button> 
      <span>{{count}}</span>
      <button v-on:click="count++">+</button>
    </div>
    <button @click="fn">弹框</button>
    <div>
      <button @click="fn1">切换显示隐藏</button>
      <h1 v-show="isShow">你好</h1>
    </div>
  </div>

  
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
   <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        msg:"Hello World",
        condition:true,
        arr:[
          {id:1,name:'aaa'},{id:2,name:'bbb'},{id:3,name:'ccc'}
        ],
        url:"https://www.baidu.com",
        gender:1,
        count:0,
        isShow:true
      },
      methods:{
        fn(){
          alert(123);
        },
        fn1(){
          this.isShow =!this.isShow;
        }
      }
    })

  </script>
</body>
</html>